<template>
  <div>
    <div style="background-color:aqua"><h1 align='right'>云程平台欢迎您：季亚楠同学</h1></div>
    <h1 align='center'>角色管理</h1>
    角色名称：<input type="text" placeholder="请输入角色名称" v-model="name">
    <button @click="btn_name">查询</button>
    <button>重置</button>
    <p>
      <button @click="btn_v">+添加角色</button>
      <button>删除</button>
    </p>
    <table border="1" cellspacing='0'>
      <tr>
      <td><input type="checkbox"></td>
      <td>序号</td>
      <td>角色名称</td>
      <td>角色编码</td>
      <td colspan="3" align='center' >操作</td>
      </tr>
      <tr v-for="i in list1" :key="i.id">
        <td><input type="checkbox"></td>
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.bianm}}</td>
        <td><span>编辑</span></td>
        <td><span @click="btn_del(i.id)">删除</span></td>
        <td><span @click="btn_xg(id)">相关用户</span></td>
      </tr>
    </table><p></p>
        <div v-show="flag">
        <input type="text" placeholder="请输入角色名称" v-model="form.name"><p></p>
        <input type="text" placeholder="请输入角色编码" v-model="form.bianm"><p></p>
        <input type="text" placeholder="请输入角色排序" v-model="form.paix"><p></p>
        <button @click="btn_post">添加</button>
      </div>
      <div v-show="flag2">
        <p>--------------------------------------------------------------------------------</p>
        用户名称： <input type="text" placeholder="请输入用户名称"> <button>查询</button> <button>重置</button>
        <p> <button @click="add">+添加用户</button> <button>删除</button> </p>
        <table border="1" cellspacing='0'>
          <tr>
          <td><input type="checkbox"></td>
          <td>用户账号</td>
          <td>用户名称</td>
          <td colspan="2" align='center'>操作</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>{{}}</td>
            <td>{{}}</td>
            <td>编辑</td>
            <td>删除</td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    list1:[],
    name:"",
    form:{},
    flag:false,
    flag2:false,
    id:'',
    list2:[]

  }
},
methods:{
  btn(){
    this.axios.get('/zhiw').then(res=>{
      this.list1=res.data.list
      console.log(res)
    })
  },
  btn_name(){
    this.axios.get('/zhiw?name='+this.name).then(res=>{
      this.list1=res.data.list
    })
  },
  btn_del(id){
    this.axios.delete('/zhiw?id='+id).then(res=>{
      alert(res.data.mes)
      this.btn()
    })
  },
  btn_post(){
    this.axios.post('/zhiw',this.form).then(res=>{
      this.form=res.data
      alert(res.data.mes)
      this.flag=false
      this.btn()
    })
  },
  btn_v(){
    if(this.flag==false){
      this.flag=true
    }else{
      this.flag=false
    }
  },
  btn_xg(id){
    if(this.flag2==false){
      this.flag2=true
      this.id=id
    }else{
      this.flag2=false
    }
  },
  add(){
    this.axios.get('/users').then(res=>{
      this.list2=res.data.list
    })
  }
},
mounted(){
  this.btn()
}
}
</script>
                                           
<style>

</style>